import React, { useState } from 'react';
import { View, Image, Text } from '@ray-js/ray';
import { Circle, SmartCircle } from '@ray-js/smart-ui';
import clsx from 'clsx';
import { useDevice, useActions, useProps, useStructuredActions } from '@ray-js/panel-sdk';
import { ControlBar, Button, CircleProgress } from '@/components';
import { getCachedSystemInfo } from '@/api/getCachedSystemInfo';
import Strings from '@/i18n';
import RayCircleProgress from '@ray-js/circle-progress';
import styles from './index.module.less';

const sysInfo = getCachedSystemInfo();

export function Home() {
  const deviceName = useDevice(d => d.devInfo.name);
  const dpSchema = useDevice(d => d.dpSchema);
  const {
    temp_set: {
      property: { min: tempMin, max: tempMax },
    },
    speed_set: {
      property: { min: speedMin, max: speedMax },
    },
  } = dpSchema;

  const dpActions = useActions();
  const dpStructuredActions = useStructuredActions();
  const {
    temp_current: tempCurrent,
    speed_fan: fanCurrent,
    speed_set: speddSet,
    temp_set: tempSet,
    work_mode: workMode,
    switch: power,
    countdown,
    posing,
    water_alarm: waterAlarm,
  } = useProps(props => props);

  const moreFuncs = [
    {
      pic: workMode === 'cooling' ? '/images/done/cold.png' : '/images/done/cold_1.png',
      active: workMode === 'cooling',
    },
    {
      pic: waterAlarm ? '/images/done/shuiwei.png' : '/images/done/shuiwei_1.png',
      active: waterAlarm,
    },
    {
      pic: countdown > 0 ? '/images/done/clock.png' : '/images/done/clock_1.png',
      active: countdown > 0,
    },
    {
      pic: posing ? '/images/done/baifeng.png' : '/images/done/baifeng_1.png',
      active: posing,
    },
  ];

  const renderMore = React.useCallback(() => {
    return (
      <View className={styles.more}>
        {moreFuncs.map(item => {
          return (
            <View
              key={item.pic}
              className={styles.moreItem}
              style={{
                backgroundColor: !item.active ? '#579FFB' : '#fff',
              }}
            >
              <Image style={{ width: 68, height: 68, objectFit: 'contain' }} src={`${item.pic}`} />
            </View>
          );
        })}
      </View>
    );
  }, [moreFuncs]);

  const handleTogglePower = React.useCallback(() => {
    dpActions.switch.toggle({ throttle: 300 });
  }, []);

  const handleAddTemp = React.useCallback(() => {
    const val = Math.min(tempSet + 1, tempMax);
    dpActions.temp_set.set(val, { checkRepeat: false, throttle: 300 });
  }, [tempSet, tempMax]);

  const handleSubTemp = React.useCallback(() => {
    const val = Math.max(tempSet - 1, tempMin);
    dpActions.temp_set.set(val, { checkRepeat: false, throttle: 300 });
  }, [tempSet, tempMin]);

  const handleAddSpeed = React.useCallback(() => {
    const val = Math.min(speddSet + 1, speedMax);
    dpActions.speed_set.set(val, { checkRepeat: false, throttle: 300 });
  }, [speddSet, speedMax]);

  const handleSubSpeed = React.useCallback(() => {
    const val = Math.max(speddSet - 1, speedMin);
    dpActions.speed_set.set(val, { checkRepeat: false, throttle: 300 });
  }, [speddSet, speedMin]);

  return (
    <View className={styles.view} style={{ paddingTop: `${sysInfo.statusBarHeight}px` }}>
      {/* 根据开关显示不同的页面状态 */}
      <View className={styles.devName}>{deviceName}</View>

      <View
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
        }}
        className={styles.box}
      >
        <View className={styles.topBox}>
          <View className={styles.tempCurrent}>
            <View className={styles.row}>
              <Image
                style={{ width: 28, height: 40, marginRight: 12 }}
                src={`/images/done/temp.png`}
              />
              {`${tempCurrent}℃`}
            </View>
            <Text className={styles.text}>{Strings.getLang('innerTemp')}</Text>
          </View>
          <View className={styles.tempCurrent}>
            <View className={styles.row}>
              <Image
                style={{ width: 40, height: 40, marginRight: 12 }}
                src={`/images/done/speedFan.png`}
              />
              {`${fanCurrent}PPM`}
            </View>
            <Text className={styles.text}>{Strings.getLang('currentSpeed')}</Text>
          </View>
          <Button onClick={() => handleTogglePower()}>
            <Image
              style={{ width: 84, height: 84 }}
              src={`/images/done/${power ? 'powerOn' : 'powerOff'}.png`}
            />
          </Button>
        </View>

        <View>
          <View className={clsx(styles.topBox, styles.padding)}>
            <Button onClick={() => handleSubTemp()}>
              <Image
                style={{ width: 64, height: 64, marginRight: 12 }}
                src={`/images/done/sub.png`}
              />
            </Button>
            <View className={styles.circleCenter}>
              <View className={styles.circleCenterProgress}>
                <CircleProgress max={tempMax} min={tempMin} current={tempSet} size={180} />
                <Text className={styles.maxtext}>{tempMin}</Text>
                <Text className={styles.mintext}>{tempMax}</Text>
              </View>
              <View className={styles.circleCenterBg}>
                <View className={styles.circleCenterCurrentTemp}>
                  <Text
                    style={{
                      color: '#000',
                    }}
                  >
                    {tempSet}
                  </Text>
                  <Text
                    style={{
                      color: '#000',
                    }}
                  >
                    ℃
                  </Text>
                </View>
                <Text
                  className={styles.text}
                  style={{
                    color: '#000',
                    marginTop: '-5rpx',
                  }}
                >
                  {Strings.getLang(workMode)}
                </Text>
              </View>
            </View>
            <Button onClick={() => handleAddTemp()}>
              <Image style={{ width: 64, height: 64 }} src={`/images/done/add.png`} />
            </Button>
          </View>

          <View className={clsx(styles.topBox, styles.padding)}>
            <Button onClick={() => handleSubSpeed()}>
              <Image style={{ width: 64, height: 64 }} src={`/images/done/sub.png`} />
            </Button>
            {/* <RayCircleProgress
          value={value}
          startDegree={125}
          offsetDegree={290}
          onTouchMove={handleMove}
          onTouchEnd={handleEnd}
        /> */}
            <View className={styles.circleCenter}>
              <View className={styles.circleCenterProgress}>
                <CircleProgress max={speedMax} min={speedMin} current={speddSet} size={180} />
                <Text className={styles.maxtext}> {speedMin}</Text>
                <Text className={styles.mintext}> {speedMax}</Text>
              </View>
              <View className={styles.circleCenterBg}>
                <Image style={{ width: 84, height: 84 }} src={`/images/done/speed.png`} />
                <Text
                  style={{
                    color: '#000',
                  }}
                  className={styles.text}
                >
                  {Strings.getLang('speedTitle')}
                </Text>
              </View>
            </View>
            <Button onClick={() => handleAddSpeed()}>
              <Image style={{ width: 64, height: 64 }} src={`/images/done/add.png`} />
            </Button>
          </View>
        </View>
        <View
          style={{
            marginBottom: '16px',
          }}
        >
          {renderMore()}
        </View>
      </View>

      <ControlBar />
    </View>
  );
}

export default Home;
